<template>
  <view :class="[ns.b, font && 'is-font']">
    <template v-for="item in fv.keys">
      <view :class="[item.class]" v-if="item.is">{{ text }}</view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { useNamespace } from '@/utils'
import Font from '.'
import { computed } from 'vue'

defineOptions({
  name: Font.name
})
const props = defineProps(Font.props)
const ns = useNamespace(Font.name)
const fv = computed(() => {
  const keys = ['shadow', 'stroke', 'font'] as const

  return {
    keys: keys.map(item => {
      const is = props[item] || item == 'font'
      return {
        is,
        class: [ns.e(item), props.icon && 'iconfont ' + props.icon]
      }
    })
  }
})
</script>